<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>关注成长</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" href="css/element-ui-index.css"/>
    <script type="text/javascript" src="js/element-ui-index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="app" style="width: 100%;">
<template style="width: 100%;">
    <div style="padding: 20px;color: rgb(0 0 0);text-decoration: none;font-size: smaller;">
        <el-button style="color:#3a8ee6;" icon="el-icon-back" circle size="mini" onclick="window.location.href='./list.html'"></el-button>
    </div>
    <div style="font-weight: 600;text-align: center;">Management</div>

    <!-- 查询用户密码 -->
    <div class="fill-form" style="margin: 36px;">
        <el-form :model="fillForm" :rules="fillFormRules" ref="fillFormRef">
            <el-form-item prop="formUsername" style="margin-bottom:28px;">
                <div style="float: left;width: 25%;font-size:12px;">用户登录名</div>
                <el-input v-model="fillForm.formUsername" maxlength="11" style="font-size:13px;width: 75%;float: right;"></el-input>
            </el-form-item>
            <el-row>
                <el-col>
                    <el-button type="primary" :loading="loadingBtn" @click="inquiryMember" class="el-col-24">
                        <div v-if="!loadingBtn">查询用户密码</div>
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div style="font-size: small;color: #00a599;padding: 10px 32px 10px 32px;" v-if="member_id>0">
                        member id {{member_id}} &nbsp;&nbsp; password {{member_password}}
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>

    <div style="text-align: center;font-size: medium;color: #000000;padding: 10px 0px 32px 0px;margin:36px;">
        <el-button type="primary" :loading="loadingBtn" @click="redirectAddExamination" class="el-col-24">
            <div v-if="!loadingBtn">添加新的考试</div>
        </el-button>
    </div>

    <div style="padding: 20px;color: rgb(0 0 0);text-decoration: none;font-size: smaller;text-align: right;">
        <el-button style="color:#3a8ee6;" icon="el-icon-refresh" circle size="mini" @click="getRecords()"></el-button>
    </div>

    <el-table :data="records" :show-header="false" style="width: 92%;margin: auto;" v-loading="loading">
        <el-table-column label="名称">
            <template slot-scope="scope">
                <el-link type="primary" @click="redirectMain(scope.row)" size="small">{{scope.row.name}}</el-link>
                <div style="font-size: smaller;color: #a9534b;">登记人数 {{scope.row.members}} 人.  登记码 {{scope.row.code}}</div>
            </template>
        </el-table-column>
        <el-table-column label=" " width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="modifyExamination(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteExamination(scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="padding: 16px;"></div>

</template>
</div>
</body>

<script type="text/javascript">
new Vue({
    el: '#app',
    data() {
        return {
            token: "",
            member_id: 0,
            member_password: "",
            loading: false,
            records: [],

            loadingBtn: false,
            //表单对象
            fillForm: {
                formUsername: ""
            },
            //表单验证规则
            fillFormRules: {
                //数据登记码的校验规则
                formUsername: [
                    { required: true, message: "请输入11位用户名", trigger: "blur" },
                    { min: 11, max: 11, message: "请输入11位用户名", trigger: "blur" }
                ]
            }
        }
    },
    created() {
        this.token = sessionStorage.getItem("token");
        if (!this.token) {
            top.location.href = "login.html";
            return;
        }
    },
    mounted() {
        this.getRecords();
    },
    methods: {
        async inquiryMember() {
            this.$refs.fillFormRef.validate(async valid => {
                if (!valid) return this.$message.error("请输入有效的考试登记码");
                var params = {};
                params.token = this.token;
                params.username = this.fillForm.formUsername;
                this.loadingBtn = true;
                //提交验证数据登记码
                let _this = this;
                axios.post("/api/mgr_getMember", params)
                  .then(function (res) {
                    if (res.data.rcode == 0) {
                        _this.loadingBtn = false;
                        _this.member_id = res.data.body.member_id
                        _this.member_password = res.data.body.password
                        return;
                    } else {
                        _this.loadingBtn = false;
                        _this.member_id = 0;
                        return _this.$message.error("没有找到此用户");
                    }
                  })
                  .catch(function (error) {
                      _this.loadingBtn = false;
                      _this.member_id = 0;
                      return _this.$message.error("系统异常");
                  });
            })
        },
        async getRecords() {
            var params = {};
            params.token = this.token;
            this.loading = true;
            //查询已登记数据
            let _this = this;
            axios.post("/api/mgr_examinations", params)
                .then(function (res) {
                if (res.data.rcode == 0) {
                    _this.loading = false;
                    _this.records = res.data.body;
                    return;
                } else {
                    _this.loading = false;
                    return _this.$message.error("系统异常");
                }
                })
                .catch(function (error) {
                    _this.loading = false;
                    return _this.$message.error("系统异常");
                });
        },
        redirectAddExamination() {
            sessionStorage.setItem("exam_id", 0);
            window.location.href = "mgr_exam.html";
            return;
        },
        modifyExamination(row) {
            sessionStorage.setItem("exam_id", row.eid); //修改考试成绩
            window.location.href = "mgr_exam.html";
            return;
        },
        deleteExamination(row) {
            this.$confirm('确认要删除此考试吗？', '提示', {
                confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
            }).then(() => {
                var params = {};
                params.token = this.token;
                params.exam_id = row.eid;
                let _this = this;
                axios.post("/api/mgr_deleteExamination", params)
                    .then(function (res) {
                        if (res.data.rcode == 0) {
                            _this.$message({ type: 'success', message: '删除成功!' });
                            //刷新页面列表
                            _this.getRecords();
                        } else {
                            return _this.$message.error("系统异常");
                        }
                    })
                    .catch(function (error) {
                        return _this.$message.error("系统异常");
                    });
            }).catch(() => {
                this.$message({ type: 'info', message: '已取消删除' });
            });
        }
    }
})
</script>

</html>
